<!--
 * @Author: ChunLai
 * @Date: 2022-02-17 11:53:26
 * @LastEditTime: 2025-11-25 14:09:40
 * @Description: 保险计划
 * @FilePath: \01.latest-short-insure\src\views\index\components\PlanDutyDesc.vue
-->
<template>
  <div class="mainbox bg-fff">
    <div class="sy-mode-head">
      <span class="sy-mode-head-label">保障计划</span>
    </div>
    <ul class="grid-ul">
      <li
        :class="['grid-item', index == activeId ? 'active' : '']"
        v-for="(item, index) in insuPlan"
        :key="index"
        @click="activeId = index"
      >
        {{ item.name }}
      </li>
    </ul>
    <ol class="item-ol">
      <li
        class="item-li"
        v-for="(item, index) in insuPlan[activeId].infos"
        :key="index"
      >
        <span class="item-li-l">
          {{ item.title }}
        </span>
        <span class="item-li-r" v-if="item.value">
          {{ item.value }}
        </span>
      </li>
      <li class="item-li-more ft12" @click="showPreModule = true">查看详情</li>
    </ol>
    <div class="taps_foot" v-if="insuPlan[activeId].prem">
      ￥ <strong>{{ insuPlan[activeId].prem }}</strong> 起
    </div>

    <PopCommon
      popTitle="保障详情"
      :popShow="showPreModule"
      @callback="showPreModule = false"
    >
      <template v-slot:content>
        <div>
          <ul class="grid-ul grid2">
            <li
              :class="['grid-item', index == activeId ? 'active' : '']"
              v-for="(item, index) in insuPlan"
              :key="index"
              @click="activeId = index"
            >
              {{ item.name }}
            </li>
          </ul>

          <ol class="item-ol pd14_lr">
            <li
              class="item-li2"
              v-for="(item, index) in insuPlan[activeId].infos"
              :key="index"
            >
              <div class="item-li-t">
                <span class="item-li-l">
                  {{ item.title }}
                </span>
                <span class="item-li-r2" v-if="item.value">
                  {{ item.value }}
                </span>
              </div>
              <div class="item-li-b" v-html="item.description"></div>
            </li>
          </ol>
        </div>
      </template>
    </PopCommon>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "PlanDutyDesc",
  components: {},
  computed: {
    ...mapGetters({
      insuPlan: "home/insuPlan",
    }),
  },
  data() {
    return {
      activeId: 0,
      activeName: "0",
      showPreModule: false,
    };
  },
};
</script>

<style lang="less" scoped>
.grid-ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;

  &.grid2 {
    padding: 10px;
  }

  .grid-item {
    height: 32px;
    line-height: 32px;
    padding: 0 10px;
    font-size: 12px;
    color: #333333;
    text-align: center;
    border-radius: 3px;
    background-color: #f7f7f7;

    &.active {
      color: #ffffff;
      background-color: #00a8f7;
    }
  }
}

.item-ol {
  display: flex;
  flex-direction: column;

  .item-li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 0;
    font-size: 12px;

    &:not(:last-child) {
      border-bottom: 1px dashed #e1e1e1;
    }

    .item-li-l {
      line-height: 1.3;
      color: #666666;
    }

    .item-li-r {
      max-width: 36%;
      line-height: 1.3;
      color: #333333;
    }
  }

  .item-li2 {
    padding-bottom: 10px;

    &:not(:last-child) {
      border-bottom: 1px dashed #e1e1e1;
    }

    .item-li-t {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 8px 0;
      font-size: 12px;

      .item-li-l {
        line-height: 1.3;
        color: #333333;
        font-weight: 600;
      }

      .item-li-r2 {
        max-width: 36%;
        line-height: 1.3;
        color: #ff8c2c;
      }
    }

    .item-li-b {
      color: #666;
      font-size: 12px;
      line-height: 1.5;
    }
  }

  .item-li-more {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    font-size: 12px;
    color: #1890ff;
  }
}

.mainbox {
  padding: 0 14px;
}

.taps_foot {
  width: 100%;
  padding: 0 0 14px 0;
  background-color: #ffffff;
  color: #ee0a24;
  overflow: hidden;

  strong {
    font-size: 24px;
  }

  text-align: left;
}
</style>
